import { DatePicker, List, SearchBar, NavBar, Icon, Uploader, WhiteSpace, Toast, Button, WingBlank } from 'antd-mobile';
import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      files: [{
        url: 'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
        id: '2121',
      }, {
        url: 'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
        id: '2122',
      }, {
        url: 'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
        id: '2123',
      }, {
        url: 'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
        id: '2124',
      }, {
        url: 'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
        id: '2125',
      }, {
        url: 'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
        id: '2126',
      }],
      files2: []
    }
  }
  
  render() {
    return (
      <div>
        <SearchBar
          placeholder="搜索"
          onSubmit={(value) => { console.log(`onSubmit${value}`); }}
          onClear={() => { console.log('onClear'); }}
          onCancel={() => { console.log('onCancel'); }}
          onFocus={() => { console.log('onFocus'); }}
          onBlur={() => { console.log('onBlur'); }}
        />
        <Uploader
          onChange={(files) => {
            console.log(files);
            this.setState({
              files,
            });
          }}
          files={this.state.files}
        />
        <Uploader
         onChange={(files2) => {
           this.setState({
             files2,
           });
         }}
         files={this.state.files2}
       />
      </div>
    )
  }
}